<template>
    <view class="apply-withdraw-container">
        <view class="form-card">
            <view class="form-item">
                <text class="form-label">可提现金额(元)</text>
                <input class="form-input" type="digit" :value="available" disabled />
            </view>
            
            <view class="form-item">
                <text class="form-label">提现金额(元)</text>
                <input class="form-input" type="digit" v-model="withdrawAmount" 
                       placeholder="请输入提现金额" />
            </view>
            
            <view class="form-item">
                <text class="form-label">提现方式</text>
                <picker @change="bindPickerChange" :value="payTypeIndex" :range="payTypes">
                    <view class="picker">{{ payTypes[payTypeIndex] }}</view>
                </picker>
            </view>
            
            <button class="submit-btn" @click="submitWithdraw">提交申请</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            available: 0,
            withdrawAmount: '',
            payTypeIndex: 0,
            payTypes: ['微信', '支付宝', '银行卡']
        }
    },
    onLoad(options) {
        this.available = parseFloat(options.available || 0).toFixed(2);
    },
    methods: {
        bindPickerChange(e) {
            this.payTypeIndex = e.detail.value;
        },
        async submitWithdraw() {
            // 验证输入
            if (!this.withdrawAmount || parseFloat(this.withdrawAmount) <= 0) {
                uni.showToast({ title: '请输入有效的提现金额', icon: 'none' });
                return;
            }
            
            if (parseFloat(this.withdrawAmount) > this.available) {
                uni.showToast({ title: '提现金额不能超过可提现余额', icon: 'none' });
                return;
            }
            
            // 获取用户信息
            const launch = uni.getStorageSync('my_info');
			
            // 修改支付类型映射关系
            const payTypeMap = {
                0: 1, // 微信 -> 1
                1: 2, // 支付宝 -> 2
                2: 4  // 银行卡 -> 4 (修改这里)
            };
            const params = {
                user_id: launch.id,
                amount: parseFloat(this.withdrawAmount),
                pay_type: payTypeMap[this.payTypeIndex] // 使用映射关系
            };
            
            // 提交申请
            const res = await this.$myRuquest({
                url: '/index/api/applyWithdraw',
                method: 'POST',
                data: params
            });
            
            if (res.data.code == 200) {
                uni.showToast({ title: '提现申请已提交', icon: 'success' });
                setTimeout(() => {
                    uni.redirectTo({
                        url: '/pages/mine/tixian'
                    });
                }, 1500);
            } else {
                uni.showToast({ 
                    title: res.data.info || '提现申请失败', 
                    icon: 'none' 
                });
            }
        }
    }
}
</script>

<style lang="scss">
.apply-withdraw-container {
    padding: 30rpx;
    background-color: #f7f7f7;
    min-height: 100vh;
    
    .form-card {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    }
    
    .form-item {
        margin-bottom: 40rpx;
        
        .form-label {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 15rpx;
        }
        
        .form-input, .picker {
            height: 80rpx;
            border: 1rpx solid #ddd;
            border-radius: 8rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            line-height: 80rpx;
            background-color: #fff;
        }
        
        .form-input[disabled] {
            background-color: #f5f5f5;
            color: #666;
        }
    }
    
    .submit-btn {
        background-color: rgb(241, 67, 153);
        color: #fff;
        border-radius: 50rpx;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 40rpx;
    }
}
</style>